<template>
  <view class="content">
    <swiper
      class="home-banner"
      circular
      :indicator-dots="true"
      :autoplay="homeBannerAutoPlay"
      :interval="homeBannerInterval"
      :duration="500"
      :current="homeBannerIndex"
      indicator-color="rgba(255,255,255,0.3)"
      indicator-active-color="green"
      @change="homeBannerChange"
    >
      <swiper-item
        v-for="(t, i) in bannerList"
        :key="i"
      >
        <template v-if="t.type === 'video'">
          <video
            class="home-banner-video"
            :id="'homeBannerVideo' + i"
            :ref="'homeBannerVideo' + i"
            :src="t.src"
            :autoplay="true"
            :loop="false"
            :muted="true"
            :controls="true"
            :enable-progress-gesture="false"
            :show-center-play-btn="false"
            @ended="(e) => homeBannerVideoEnd(e, i)"
          ></video>
        </template>
        <template v-else-if="t.type === 'image'">
          <image
            class="home-banner-image"
            :src="t.src"
            alt=""
            mode="aspectFill"
          />
        </template>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { judgeFileType } from '@/utils'

const { proxy: _this } = getCurrentInstance()
// 首页banner轮播时长
const homeBannerInterval = ref(3000)
// 首页banner轮播是否自动播放
const homeBannerAutoPlay = ref(false)
// 首页banner轮播当前所在滑块的 index
const homeBannerIndex = ref(0)

const props = defineProps({
  swiperList: {
    type: Array,
    default: () => {
      return []
    },
  },
})

const bannerList = computed(() => {
  let arr = []
  if (props.swiperList.length) {
    arr = props.swiperList.map((item) => {
      const { type, src } = judgeFileType(item)
      return {
        type,
        src,
      }
    })
  }
  console.log('arr', arr)
  return arr
})

// 首页banner数据
// const bannerList = ref([
//   {
//     type: 'video',
//     src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
//   },
//   {
//     type: 'image',
//     src: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
//   },
//   {
//     type: 'image',
//     src: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
//   },
// ])

// 计算当前轮播停留时间
const calcIndexBanner = () => {
  // 首页banner是否有数据
  if (bannerList.value && bannerList.value.length > 0) {
    // 第一条数据是否为视频
    if (bannerList.value[homeBannerIndex.value].type === 'video') {
      // 是视频则关闭自动轮播
      homeBannerAutoPlay.value = false
      // 创建视频对象，播放视频
      const videContext = uni.createVideoContext('homeBannerVideo0')
      videContext.play()
    } else {
      // 不是视频则开启自动轮播
      homeBannerAutoPlay.value = true
    }
  }
}

// 当前轮播视频结束后切换轮播
const homeBannerVideoEnd = (event, index) => {
  // 处理动态赋值切换轮播不生效
  homeBannerIndex.value = index
  nextTick(() => {
    // 当前banner中视频播放结束
    // 当前为最后一轮播
    if (index + 1 === bannerList.value.length) {
      // 切换到第一轮播
      homeBannerIndex.value = 0
    }
    // 当前不是最后一轮播
    else {
      // 切换到下一轮播
      homeBannerIndex.value = index + 1
    }
  })
}
// 轮播切换后
const homeBannerChange = (e) => {
  if (bannerList.value[homeBannerIndex.value].type === 'video') {
    // 创建视频对象，暂停播放视频
    const videContext = uni.createVideoContext('homeBannerVideo0')
    videContext.pause()
  }
  // 处理动态赋值切换轮播不生效
  homeBannerIndex.value = e.detail.current
  calcIndexBanner()
}

onMounted(() => {
  calcIndexBanner()
})
</script>

<style lang="scss" scoped>
.home-banner {
  height: 180px;

  .banner-link {
    display: block;
    height: 100%;
  }

  &-video,
  &-image {
    width: 100%;
    height: 100%;
  }
}
</style>
